<template>
  <div class="farmland-detail f-r">
    <div class="f-g" style="height: 100%"><Map /></div>
    <div class="farmland-edit-drawer">
      <div class="drawer-content">
        <div class="button-group">
          <el-button plain type="primary" @click="onEdit">编辑田</el-button>
          <el-button plain type="primary" @click="onDelete">删除田</el-button>
        </div>
        <div class="detail-group f-r a-c" style="margin-top: 1px">
          <div class="detail-item detail-item1 f-r a-c">
            <div class="img-box" />
            <div class="detail-content1">
              <div class="title">{{ fieldDetail.cropSubName }}</div>
              <div v-for="(item,index) in valueList1" :key="index" class="value-item f-r a-c">
                <div class="label">{{ item.label }}</div>
                <div class="value">{{ item.value }}</div>
              </div>
            </div>
          </div>
          <div class="detail-item detail-item2 f-r a-c">
            <div class="detail-content1">
              <div v-for="(item,index) in valueList2" :key="index" class="value-item f-r a-c">
                <div class="label">{{ item.label }}</div>
                <div class="value">{{ item.value }}</div>
              </div>
            </div>
          </div>
          <div class="detail-item detail-item3 f-r a-c">
            <div class="detail-content1">
              <div v-for="(item,index) in valueList3" :key="index" class="value-item f-r a-c">
                <div class="label">{{ item.label }}</div>
                <div class="value">{{ item.value }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-group2 f-r j-b">
          <div class="detail-content1 f-c j-e">
            <div class="f-r a-c group1">
              <div class="tem-large">
                {{ weatherInfo.temperature }}°C
              </div>
              <div class="f-c j-c">
                <div class="status2">{{ }}</div>
                <div class="value">{{ weatherInfo.weather }}/{{ weatherInfo.wind }}</div>
              </div>
            </div>
            <div class="group2 f-r a-c">
              <div class="item f-r a-c">
                <span class="label">日出：</span>
                <span class="value">{{ weatherInfo.sunRise }}</span>
              </div>
              <div class="item f-r a-c">
                <span class="label">日落：</span>
                <span class="value">{{ weatherInfo.sunSet }}</span>
              </div>
              <div class="item f-r a-c">
                <span class="label">湿度：</span>
                <span class="value">{{ weatherInfo.humidity }}</span>
              </div>
            </div>
            <div class="group3 f-g f-c j-e">
              <div class="item f-r a-c">
                <div class="icon" />
                <div class="label">天气预警</div>
                <div class="value">暂无</div>
              </div>
              <div class="item f-r a-c">
                <div class="icon" />
                <div class="label">气象预警</div>
                <div class="value">暂无</div>
              </div>
            </div>
          </div>
          <div class="detail-content2">
            <div class="button-group f-r a-c j-e">
              <el-radio-group v-model="radio1" size="large">
                <el-radio-button label="hour24List">
                  未来24小时
                </el-radio-button>
                <el-radio-button label="day7List">
                  未来7天
                </el-radio-button>
              </el-radio-group>
            </div>
            <div class="weather-list f-r a-c j-b">
              <div v-for="(item,index) in weatherList" :key="index" class="item">
                <div class="date">{{ item.date }}</div>
                <div class="icon">
                  <el-image style="width: 100%;height: 100%" :src="item.beginWeatherUrl" />
                </div>
                <div class="icon">
                  <el-image style="width: 100%;height: 100%" :src="item.endWeatherUrl" />
                </div>
                <div class="status">{{ item.weather }}/{{ item.wind }}</div>
                <div class="temp">{{ item.temp }}°C</div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-group3">
          <el-tabs v-model="activeName" style="margin: 25px 0">
            <el-tab-pane label="种植管理" name="Plant" />
            <el-tab-pane label="土壤" name="Soil" />
            <el-tab-pane label="积温积雨" name="Accumulate" />
            <el-tab-pane label="病虫草害" name="Fest" />
            <el-tab-pane label="施肥方案" name="Fertilization" />
            <component :is="activeName" />
            <!--            <div class="calendar__header f-r a-c j-b">-->
            <!--              <div class="date">-->
            <!--                2022 年 12月-->
            <!--              </div>-->
            <!--              <div class="date-change f-r a-c">-->
            <!--                <i class="el-icon-arrow-left" />-->
            <!--                <span class="c-date">十二月</span>-->
            <!--                <i class="el-icon-arrow-right" />-->
            <!--              </div>-->
            <!--              <el-radio-group v-model="radio2" size="large">-->
            <!--                <el-radio-button label="月份日历" />-->
            <!--                <el-radio-button label="年份日历" />-->
            <!--              </el-radio-group>-->
            <!--            </div>-->
            <!--            <el-calendar v-model="calendarValue" />-->
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Map2 from './canvasMap';
import { http_farmland } from '@/api';
import Plant from './plant'
import Soil from './soil'
import Accumulate from './accumulate'
import Fest from './insectPests'
import Fertilization from './Fertilization'
export default {
  name: 'Detail',
  components: {
    Map: Map2,
    Plant,
    Soil,
    Accumulate,
    Fest,
    Fertilization
  },
  data() {
    return {
      valueList1: [
      ],
      valueList2: [
      ],
      valueList3: [
      ],
      radio1: 'hour24List',
      // weatherList: [
      //   { date: '11/18今天', icon1: '', icon2: '', status: '雾转中雨', temp: '16/14°C' },
      //   { date: '11/18今天', icon1: '', icon2: '', status: '雾转中雨', temp: '16/14°C' },
      //   { date: '11/18今天', icon1: '', icon2: '', status: '雾转中雨', temp: '16/14°C' },
      //   { date: '11/18今天', icon1: '', icon2: '', status: '雾转中雨', temp: '16/14°C' },
      //   { date: '11/18今天', icon1: '', icon2: '', status: '雾转中雨', temp: '16/14°C' }
      // ],
      activeName: 'Plant',
      calendarValue: '',
      radio2: '月份日历',
      fieldDetail: {},
      landType: {
        1: '确权',
        2: '流转',
        3: '托管',
        4: '其它'
      },
      weatherInfo: {}
    }
  },
  computed: {
    weatherList() {
      return this.weatherInfo[this.radio1] || []
    }
  },
  created() {
    http_farmland.read(this.$route.params.id).then(res => {
      http_farmland.weather(res.data.xaxis, res.data.yaxis).then(res => {
        this.weatherInfo = res.data
      })
      this.fieldDetail = res.data
      this.valueList1 = [
        { label: '田名称：', value: this.fieldDetail.farmerName },
        { label: '田亩数：', value: this.fieldDetail.area },
        { label: '田周长：', value: this.fieldDetail.perimeter },
        { label: '土地类型：', value: this.landType[this.fieldDetail.landType] }
      ]
      this.valueList2 = [
        { label: '海拔：', value: this.fieldDetail.altitude },
        { label: '坡度：', value: this.fieldDetail.slope },
        { label: '密度：', value: this.fieldDetail.density },
        { label: '灌溉方式：', value: this.fieldDetail.plantingMode },
        { label: '地址：', value: this.fieldDetail.address }
      ]
      this.valueList3 = [
        { label: '播种日期：', value: this.fieldDetail.sowTime },
        { label: '农户：', value: this.fieldDetail.farmerName },
        { label: '联系方式：', value: this.fieldDetail.farmerPhone },
        { label: '创建人：', value: this.fieldDetail.userName },
        { label: '负责人：', value: this.fieldDetail.leader }
      ]
    })
  },
  methods: {
    onEdit() {
      this.$router.push({
        path: '/farmland/edit/' + this.$route.params.id
      })
    },
    onDelete() {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          http_farmland.deleteOne(this.$route.params.id).then(res => {
            this.$message.success(res.msg)
            this.$router.back()
          })
        })
        .catch(() => {

        })
    }
  }
}
</script>

<style scoped lang="scss">
.farmland-detail {
  height: 100%;
  position: relative;
  .button-group {
    text-align: right;
    margin-bottom: 5px;
  }
  .detail-group {
    margin-bottom: 33px;
    .detail-item {
      .img-box {
        width: 108px;
        height: 108px;
        background: rgba(255,224,224,0.39);
        opacity: 1;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 16px;
      }
    }
    .detail-item1 {
      width: 250px;
      border-right: 1px solid #EAEAEA;
    }
    .detail-item2 {
      padding-left: 30px;
      width: 250px;
      border-right: 1px solid #EAEAEA;
    }
    .detail-item3 {
      padding-left: 30px;
      width: 160px;
    }
    .detail-content1 {
      .title {
        font-size: 20px;

        font-weight: 500;
        line-height: 28px;
        color: #333333;
        opacity: 1;
      }
      .value-item {
        .label {
          width: 68px;
          font-size: 12px;

          font-weight: 400;
          line-height: 22px;
          color: #333333;
        }
        .value {
          font-size: 12px;

          font-weight: 400;
          line-height: 22px;
          color: #9A9A9A;
        }
      }
    }
  }
  .detail-group2 {
    .detail-content1 {
      .group1 {
        margin-bottom: 20px;
        .tem-large {
          font-size: 52px;
          font-weight: 500;
          color: #333333;
          margin-right: 22px;
        }
        .status2 {
          width: 46px;
          height: 22px;
          background: rgba(255,179,36,1);
          opacity: 1;
          border-radius: 14px;
          line-height: 22px;
          text-align: center;
          font-size: 16px;

          font-weight: 400;
          color: #FFFFFF;
          margin-bottom: 5px;
        }
        .value {
          font-size: 16px;
          font-weight: 400;
          line-height: 22px;
          color: #333333;
        }
      }
      .group2 {
        .item {
          flx: 1;
          padding-right: 10px;
        }
        .label {
          font-size: 14px;

          font-weight: 400;
          line-height: 22px;
          color: #333333;
        }
        .name {
          font-size: 14px;

          font-weight: 400;
          line-height: 22px;
          color: #8F8F8F;
        }
      }
      .group3 {
        .item {
          margin-top: 5px;
          .icon {
            width: 12px;
            height: 12px;
            margin-right: 5px;
          }
          .label {
            font-size: 14px;

            font-weight: 400;
            line-height: 22px;
            color: #666666;
            margin-right: 14px;
          }
          .value {
            font-size: 14px;

            font-weight: 400;
            line-height: 22px;
            color: #2482E0;
          }
        }
      }
    }
    .detail-content2 {
      .weather-list {
        width: 353px;
        background: #ffffff;
        opacity: 1;
        border-radius: 9px;
        overflow: auto;
        .item {
          flex-shrink: 0;
          width: 78px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          margin-right: 1px;
          background: rgba(237,239,240,0.59);
          padding: 10px;
          text-align: center;
          font-size: 12px;

          font-weight: 400;
          line-height: 22px;
          color: #666666;
          .icon {
            width: 16px;
            height: 12px;
            margin: 10px 0;
          }
        }
      }
    }
  }
  .farmland-edit-drawer {
    width: 703px;
    .calendar__header {
      padding-bottom: 20px;
      border-bottom: 1px solid #ECECEE;
      .date {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
      }
      .date-change {
        i {
          font-size: 18px;
          color: #9A9A9A;
        }
        .c-date {
          font-size: 12px;
          line-height: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #565658;
          opacity: 1;
          margin: 0 28px;
        }
      }
    }
    ::v-deep .el-calendar {
      .el-calendar__header {
        display: none;
      }
      .el-calendar-table .el-calendar-day {
        height: 58px;
      }
      .el-calendar-table .el-calendar-day:hover,
      .el-calendar-table td.is-selected {
        color: #1AAD23;
        background: rgba(27,163,41,0.09);
      }
    }
    .drawer-content {
      overflow: auto;
      height: 100%;
      background-color: #ffffff;
      padding: 20px;
    }
  }
}
</style>
